<!--渐变多种创意切换-->
<script setup>
defineOptions({
  name:'jbdzcyqh'
})
import {onMounted} from "vue";
onMounted(() => {
  const swiperjbdzcyqh = new Swiper(".jbdzcyqh1", {
    grabCursor: true,
    effect: "creative",
    creativeEffect: {
      prev: {
        shadow: true,
        translate: [0, 0, -400],
      },
      next: {
        translate: ["100%", 0, 0],
      },
    },
  });
  const swiperjbdzcyqh2 = new Swiper(".jbdzcyqh2", {
    grabCursor: true,
    effect: "creative",
    creativeEffect: {
      prev: {
        shadow: true,
        translate: ["-120%", 0, -500],
      },
      next: {
        shadow: true,
        translate: ["120%", 0, -500],
      },
    },
  });
  const swiperjbdzcyqh3 = new Swiper(".jbdzcyqh3", {
    grabCursor: true,
    effect: "creative",
    creativeEffect: {
      prev: {
        shadow: true,
        translate: ["-20%", 0, -1],
      },
      next: {
        translate: ["100%", 0, 0],
      },
    },
  });
  const swiperjbdzcyqh4 = new Swiper(".jbdzcyqh4", {
    grabCursor: true,
    effect: "creative",
    creativeEffect: {
      prev: {
        shadow: true,
        translate: [0, 0, -800],
        rotate: [180, 0, 0],
      },
      next: {
        shadow: true,
        translate: [0, 0, -800],
        rotate: [-180, 0, 0],
      },
    },
  });
  const swiperjbdzcyqh5 = new Swiper(".jbdzcyqh5", {
    grabCursor: true,
    effect: "creative",
    creativeEffect: {
      prev: {
        shadow: true,
        translate: ["-125%", 0, -800],
        rotate: [0, 0, -90],
      },
      next: {
        shadow: true,
        translate: ["125%", 0, -800],
        rotate: [0, 0, 90],
      },
    },
  });
  const swiperjbdzcyqh6 = new Swiper(".jbdzcyqh6", {
    grabCursor: true,
    effect: "creative",
    creativeEffect: {
      prev: {
        shadow: true,
        origin: "left center",
        translate: ["-5%", 0, -200],
        rotate: [0, 100, 0],
      },
      next: {
        origin: "right center",
        translate: ["5%", 0, -200],
        rotate: [0, -100, 0],
      },
    },
  });
});
</script>

<template>
  <div class="swiper jbdzcyqh1">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img  class="imageStyle" src="@/assets/BZ/1.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/2.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/3.jpg"></div>
      <div class="swiper-slide"><img class="imageStyle"  src="@/assets/BZ/4.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/5.jpg"></div>
    </div>
<!--    <div class="swiper-button-next"></div>-->
<!--    <div class="swiper-button-prev"></div>-->
<!--    <div class="swiper-pagination"></div>-->
  </div>
  <div class="swiper jbdzcyqh2">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img  class="imageStyle" src="@/assets/BZ/1.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/2.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/3.jpg"></div>
      <div class="swiper-slide"><img class="imageStyle"  src="@/assets/BZ/4.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/5.jpg"></div>
    </div>
<!--    <div class="swiper-button-next"></div>-->
<!--    <div class="swiper-button-prev"></div>-->
<!--    <div class="swiper-pagination"></div>-->
  </div>
  <div class="swiper jbdzcyqh3">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img  class="imageStyle" src="@/assets/BZ/1.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/2.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/3.jpg"></div>
      <div class="swiper-slide"><img class="imageStyle"  src="@/assets/BZ/4.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/5.jpg"></div>
    </div>
<!--    <div class="swiper-button-next"></div>-->
<!--    <div class="swiper-button-prev"></div>-->
<!--    <div class="swiper-pagination"></div>-->
  </div>
  <div class="swiper jbdzcyqh4">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img  class="imageStyle" src="@/assets/BZ/1.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/2.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/3.jpg"></div>
      <div class="swiper-slide"><img class="imageStyle"  src="@/assets/BZ/4.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/5.jpg"></div>
    </div>
<!--    <div class="swiper-button-next"></div>-->
<!--    <div class="swiper-button-prev"></div>-->
<!--    <div class="swiper-pagination"></div>-->
  </div>
  <div class="swiper jbdzcyqh5">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img  class="imageStyle" src="@/assets/BZ/1.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/2.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/3.jpg"></div>
      <div class="swiper-slide"><img class="imageStyle"  src="@/assets/BZ/4.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/5.jpg"></div>
    </div>
<!--    <div class="swiper-button-next"></div>-->
<!--    <div class="swiper-button-prev"></div>-->
<!--    <div class="swiper-pagination"></div>-->
  </div>
  <div class="swiper jbdzcyqh6">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img  class="imageStyle" src="@/assets/BZ/1.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/2.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/3.jpg"></div>
      <div class="swiper-slide"><img class="imageStyle"  src="@/assets/BZ/4.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/5.jpg"></div>
    </div>
<!--    <div class="swiper-button-next"></div>-->
<!--    <div class="swiper-button-prev"></div>-->
<!--    <div class="swiper-pagination"></div>-->
  </div>

</template>

<style scoped lang="scss">
.imageStyle{
  display: block;
  width: 20rem;
  height: 20rem;
  object-fit: cover;
}
.imageStyle1{
  display: block;
  width: 5rem;
  height: 5rem;
  object-fit: cover;
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

//.swiper-slide img {
//  display: block;
//  width: 20rem;
//  height: 20rem;
//  object-fit: cover;
//}



.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.sl2 {
  height: 80%;
  width: 100%;
}

.sl1 {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.sl1 .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

.sl1 .swiper-slide-thumb-active {
  opacity: 1;
}

//.swiper-slide img {
//  display: block;
//  width: 20rem;
//  height: 20rem;
//  object-fit: cover;
//}
</style>
